
<template>
<el-card>
    <my-search v-model="pgData" @search="doSearch">
        <div slot="time"></div>
        <div slot="title"></div>
        <div slot="cx"></div>
        <div class="search_aear">
            <!-- <div class="search_aear_top">
                <div class="radios">
                    <el-radio-group v-model="pgData.test" size="small">
                        <el-radio-button label="全部"></el-radio-button>
                        <el-radio-button label="待结算"></el-radio-button>
                        <el-radio-button label="已结算"></el-radio-button>
                        <el-radio-button label="退保订单"></el-radio-button>
                    </el-radio-group>
                </div>
                <div class="btns">
                    <el-button size="small" type="primary" icon="el-icon-search" @click="doSearch">查询</el-button>
                </div>
            </div> -->
            <div class="search_aear_bottom">
                <div class="labels">
                    <el-form-item  label="开始时间">
                        <el-date-picker
                            v-model="valuetime"
                            type="daterange"
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker> 
                    </el-form-item>
                    <el-form-item label="合作单位">
                        <my-select :data="partnerNamelist" :props="{label:'value',value:'value'}" v-model="pgData.partnerName" placeholder="请选择合作单位"></my-select>
                    </el-form-item>
                    <el-form-item  label="招标代理">
                        <el-input  v-model="pgData.zbdlname" placeholder="请输入招标代理" clearable></el-input>
                    </el-form-item>
                    <el-form-item  label="开标地点">
                        <el-input  v-model="pgData.kbarea" placeholder="请输入开标地点" clearable></el-input>
                    </el-form-item>
                    <el-form-item  label="项目名称">
                        <el-input  v-model="pgData.bidsection" placeholder="请输入项目名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item  label="保函费用">
                        <el-row>
                            <el-col :span="11">
                                <el-input  v-model="pgData.orderAmountMix" placeholder="金额（最小）" clearable></el-input>
                            </el-col>
                            <el-col :span="2" style="text-align: center;">
                                <span>至</span>
                            </el-col>
                            <el-col :span="11">
                                <el-input  v-model="pgData.orderAmountMax" placeholder="金额（最大）" clearable></el-input>
                            </el-col>
                        </el-row>
                    </el-form-item>
      
                    <el-form-item  label="">
                        <my-select :data="isChangneiList" :props="{label:'value',value:'key'}" v-model="pgData.isChangnei" placeholder="是否进场"></my-select>
                    </el-form-item>
                    <span v-if="getGetters('user').registertype == 1 || getQuery('registertype')== 1">
                        <el-form-item  label="">
                            <my-select :data="statusList" :props="{label:'value',value:'key'}" v-model="pgData.settStatusYw" placeholder="平台结算状态"></my-select>
                        </el-form-item>
                        <el-form-item  label="">
                            <my-select :data="statusList" :props="{label:'value',value:'key'}" v-model="pgData.settStatusHzs" placeholder="合作商结算状态"></my-select>
                        </el-form-item>
                        <el-form-item  label="">
                            <my-select :data="statusList" :props="{label:'value',value:'key'}" v-model="pgData.settStatusFxs" placeholder="分销商结算状态"></my-select>
                        </el-form-item>
                    </span>
                    <span v-if="getGetters('user').registertype == 2 || getQuery('registertype')== 2">
                        <el-form-item  label="">
                            <my-select :data="statusList" :props="{label:'value',value:'key'}" v-model="pgData.settStatusHzs" placeholder="合作商结算状态"></my-select>
                        </el-form-item>
                        <el-form-item  label="">
                            <my-select :data="statusList" :props="{label:'value',value:'key'}" v-model="pgData.settStatusFxs" placeholder="分销商结算状态"></my-select>
                        </el-form-item>
                    </span>
                    <span v-if="getGetters('user').registertype == 3 || getQuery('registertype')== 3">
                        <el-form-item  label="">
                            <my-select :data="statusList" :props="{label:'value',value:'key'}" v-model="pgData.settStatusFxs" placeholder="分销商结算状态"></my-select>
                        </el-form-item>
                    </span>
                </div>
                <div class="btns">
                    <el-button size="small" type="primary" icon="el-icon-search" @click="doSearch">查询</el-button>
                    <el-button size="small" type="success" icon="el-icon-download" @click="exportList" class="btn_dc">导出</el-button>
                    <!-- <el-button size="small" type="success" icon="el-icon-tickets" @click="goStateList">我的结算清单</el-button> -->
                </div>
            </div>
        </div>
    </my-search>
    <my-table :data="tableData" :height="tableHeight">
        <el-table-column prop="kbtime" label="开标时间" min-width="120" ></el-table-column>
        <el-table-column prop="kbarea" label="开标地点" min-width="160" align="center"></el-table-column>
        <el-table-column prop="bidsection" label="项目/标段名称" min-width="120" align="center"></el-table-column>
        <el-table-column prop="zbdlname" label="招标代理" align="center"></el-table-column>
        <el-table-column prop="tenderee" label="投标单位名称" min-width="120" align="center"></el-table-column>
        <el-table-column prop="guaranteetype" label="保函类型" align="center">
            <template slot-scope="scope">
                {{filterStatus(bhlx,scope.row.guaranteetype).value}}
            </template>
        </el-table-column>
        <el-table-column prop="guaranteemedia" label="保函介质" align="center">
            <template slot-scope="scope">
                {{filterStatus(bhjz,scope.row.guaranteemedia).value}}
            </template>
        </el-table-column>

        <el-table-column prop="agencytype" label="出函机构" v-if="getGetters('user').registertype == 1 || getQuery('registertype')== 1" align="center">
            <template slot-scope="scope">
                {{filterStatus(chjg,scope.row.agencytype).value}}
            </template>
        </el-table-column>

        <el-table-column prop="isChangnei" label="是否进场" align="center">
            <template slot-scope="scope">
                <el-tag size="small" :type="filterStatus(isChangneiList,scope.row.isChangnei).type">  
                    {{filterStatus(isChangneiList,scope.row.isChangnei).value}}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="isEncrypt" label="是否密文" align="center">
            <template slot-scope="scope">
                <el-tag size="small" :type="filterStatus(isChangneiList,scope.row.isEncrypt).type">  
                    {{filterStatus(isChangneiList,scope.row.isEncrypt).value}}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="orderAmount" label="保函费用" min-width="90" align="center"></el-table-column>
        <el-table-column prop="partnerName" label="合作单位名称" min-width="100" align="center"></el-table-column>
        <el-table-column prop="settStatusYw" label="结算状态" width="230" v-if="getGetters('user').registertype == 1 || getQuery('registertype')== 1">
            <template slot-scope="scope">
                <span>平<span style="padding-left:14px">台：</span></span>
                    <el-tag size="small" :type="filterStatus(statusList,scope.row.settStatusYw).type">  
                        {{filterStatus(statusList,scope.row.settStatusYw).value}}
                    </el-tag> 
                <span>&nbsp;</span>
                <span>{{scope.row.settAmountYw}}</span>
                <span>&nbsp;</span>
                <span>({{scope.row.settRateYw}})</span>
                <br>
                <span>合作商：</span>
                    <el-tag size="small" :type="filterStatus(statusList,scope.row.settStatusHzs).type">  
                        {{filterStatus(statusList,scope.row.settStatusHzs).value}}
                    </el-tag>
                <span>&nbsp;</span>
                <span>{{scope.row.settAmountHzs}}</span>
                <span>&nbsp;</span>
                <span>({{scope.row.settRateHzs}})</span>
                <br>
                <span>分销商：</span>
                    <el-tag size="small" :type="filterStatus(statusList,scope.row.settStatusFxs).type">  
                        {{filterStatus(statusList,scope.row.settStatusFxs).value}}
                    </el-tag>
                <span>&nbsp;</span>
                <span>{{scope.row.settAmountFxs}}</span>
                <span>&nbsp;</span>
                <span>({{scope.row.settRateFxs}})</span>
            </template>
        </el-table-column>

        <el-table-column prop="settStatusYw" label="结算状态" width="230" v-if="getGetters('user').registertype == 2 || getQuery('registertype')== 2">
            <template slot-scope="scope">
                <span>合作商：</span>
                    <el-tag size="small" :type="filterStatus(statusList,scope.row.settStatusHzs).type">  
                        {{filterStatus(statusList,scope.row.settStatusHzs).value}}
                    </el-tag>
                <span>&nbsp;</span>
                <span>{{scope.row.settAmountHzs}}</span>
                <span>&nbsp;</span>
                <span>({{scope.row.settRateHzs}})</span>
                <br>
                <span>分销商：</span>
                    <el-tag size="small" :type="filterStatus(statusList,scope.row.settStatusFxs).type">  
                        {{filterStatus(statusList,scope.row.settStatusFxs).value}}
                    </el-tag>
                <span>&nbsp;</span>
                <span>{{scope.row.settAmountFxs}}</span>
                <span>&nbsp;</span>
                <span>({{scope.row.settRateFxs}})</span>
            </template>
        </el-table-column>

        <el-table-column prop="settStatusYw" label="结算状态" width="230" v-if="getGetters('user').registertype ==3 || getQuery('registertype')== 3">
            <template slot-scope="scope">
                <span>分销商：</span>
                    <el-tag size="small" :type="filterStatus(statusList,scope.row.settStatusFxs).type">  
                        {{filterStatus(statusList,scope.row.settStatusFxs).value}}
                    </el-tag>
                <span>&nbsp;</span>
                <span>{{scope.row.settAmountFxs}}</span>
                <span>&nbsp;</span>
                <span>({{scope.row.settRateFxs}})</span>
            </template>
        </el-table-column>
        <el-table-column prop="" label="分成金额(比例)" width="170">
            <template slot-scope="scope">
                <template v-if="getGetters('user').registertype ==1 || getQuery('registertype')== 1">
                    <span>平台：{{scope.row.fcAmountYw}}</span>
                    <span>&nbsp;</span>
                    <span>({{scope.row.fcRateYw}})</span>
                    <br>
                    <span>担保公司：{{scope.row.fcAmountDbgs}}</span>
                    <span>&nbsp;</span>
                    <span>({{scope.row.fcRateDbgs}})</span>
                    <br>
                    <span>合作商：{{scope.row.fcAmountHzs}}</span>
                    <span>&nbsp;</span>
                    <span>({{scope.row.fcRateHzs}})</span>
                </template>
                <template v-if="getGetters('user').registertype ==2 || getQuery('registertype')== 2">
                    <template v-if="getGetters('user').isfxs == false || getQuery('isfxs')== false">
                        <span>合作商：{{scope.row.fcAmountHzs}}</span>
                        <span>&nbsp;</span>
                        <span>({{scope.row.fcRateHzs}})</span>
                        <br>
                    </template>
                    <template>
                        <span>分销商：{{scope.row.fcAmountFxs}}</span>
                        <span>&nbsp;</span>
                        <span>({{scope.row.fcRateFxs}})</span>
                    </template>
                </template>
                <template v-if="getGetters('user').registertype ==3 || getQuery('registertype')== 3">
                    <span>担保公司：{{scope.row.fcAmountDbgs}}</span>
                    <span>&nbsp;</span>
                    <span>({{scope.row.fcRateDbgs}})</span>
                </template>
            </template>
        </el-table-column>
    </my-table>

    <my-pagination
        ref="page"
        v-model="tableData"
        :action="$store.getters.orderUrl + '/guaOrder'"
        :search="pgData"
        :after-query="afterQuery">
    </my-pagination>

</el-card>

</template>

<script>
import DICTIONARY from '@mixins/dictionary.js'


export default {
    mixins: [ DICTIONARY ],
    props:[],
    components:{},
    data: function(){
        return{
            pgData:{
                kbstarttime:'',
                kbendtime:'',
            },
            tableData:[],
            partnerNamelist:[],
            tableHeight:'500',
            statusList:[
                {value:'未结算', key:'0',type:'info'},
                {value:'已结算', key:'1',type:'primary'},
                {value:'确认中', key:'2',type:'warning'},
                {value:'已确认', key:'3',type:'success'}
            ],
            isChangneiList:[
                {value:'否', key:'0',type:'info'},
                {value:'是', key:'1',type:'success'},
            ]
        }
    }, 
    computed:{
        valuetime:{
            get:function(){
                var startTime = this.pgData.kbstarttime || '';
                var endtime = this.pgData.kbendtime || '';
                    if(startTime && endtime){
                        return[
                            startTime,
                            endtime
                        ];
                    }else{
                        return[]
                    }
            },
            set:function(val){
                if(!val){
                    this.pgData.kbstarttime = '' ;
                    this.pgData.kbendtime = '';
                }else{
                    var startTime = val[0] || '';
                    var endtime = val[1] || '';
                    this.pgData.kbstarttime = startTime;
                    this.pgData.kbendtime = endtime;
                }
            },
        }  
    },
    watch:{
  
    },

    methods: {
        doSearch:function(){
            this.$refs.page.queryData();
        },
        //获取合作单位
        getPartnerName:function(){
            this.$get(`${this.getGetters('partnerUrl')}/partner/listSelect`,{},function(data){
                this.partnerNamelist = data;
            })
        },
        //导出
        exportList:function(){
            var search = toSearch({
                kbstarttime:this.pgData.kbstarttime,
                kbendtime:this.pgData.kbendtime,
                partnerName:this.pgData.partnerName,
                zbdlname:this.pgData.zbdlname,
                kbarea:this.pgData.kbarea,
                bidsection:this.pgData.bidsection,
                orderAmountMix:this.pgData.orderAmountMix,
                orderAmountMax:this.pgData.orderAmountMax,
                isChangnei:this.pgData.isChangnei,
                settStatusYw:this.pgData.settStatusYw,
                settStatusHzs:this.pgData.settStatusHzs,
                settStatusFxs:this.pgData.settStatusFxs,
                isExport: true,
                token:this.getQuery('token') ? this.getQuery('token') : this.getGetters('user').token
            });
                window.open('/bhtong/ordermg/guaOrder' + search);
        },
        //跳转我的结算清单
        goStateList:function(){
            this.goto({
                path: '/settmg/settItem/list',
            })
        },
        afterQuery:function(){
            this.tableHeight = (window.innerHeight - 245);
        },
        
    },
    mounted() {
        this.getPartnerName();
    }
}
</script>

<style scoped lang="scss">
.search_aear_top{
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}
.search_aear_bottom{
    display: flex;
    justify-content: space-between;
    .btns{
        text-align: right;
        .btn_dc{
            margin-top: 8px;
        }
    }
}
::v-deep .el-table th > .cell {
    text-align: center;
}
</style>
